<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Еда в сравнении</title>
    <style>
        html,
        
        body {
          height: 100%;
        }
        .wrapper {
          min-height: 100%;
          display: flex;
          background-color: #F5F5DC;
          flex-direction: column;
          background-repeat:no-repeat;
          background-size: cover;
        }
        .wrapper1 {
          min-height: 100%;
          display: flex;
          background-image: url("https://img.freepik.com/free-photo/summer-landscape-with-green-field_1398-1990.jpg?w=740&t=st=1684079700~exp=1684080300~hmac=42362b7846e8550389c80249ba22206d38aded2f9e58aa33631b77bc6af030a1"); /*  ФОН ФОН ФОН  */
          flex-direction: column;
          background-repeat:no-repeat;
          background-size: cover;
        }
        .main {
          overflow: hidden;
          padding: 30px;
          flex: 1 1 auto;
        }
        .footer {
          width: 100%;
          background: #22742b;
          color: #fff;
          text-align: center;
        }
        .index-text {
            color: #000;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 20px;
        }

        .profile {
            color: white;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-left: auto;
        }
        .ava {
            height: 20px;
            width: 20px;
            border-radius: 10px;
            margin-top: 2px;
            margin-right: 10px;
        }
        nav {
            background: #22742b;

        }

        .nav-links {
            display: flex;
            width: 100%;
        }

        .label{
            color: #ADADAD;
            width: 200px;
            margin-left: 10px;
        }

        .bg {
            background-color: #E2DEDE;
        }
        .color-dark {
            color: #201E1E;
        }
        .borders {
            border-radius: 14px;
        }
        #image_field {
            border-radius: 12px;
            height: 240px;
            width: 240px;
            border: 1px solid #000000;

        }
        #title_field {
            border-radius: 6px;
            height: 39px;
            width: 600px;
            border: 1px solid #E2DEDE;

        }
        #interesting_fact_field {
            border-radius: 6px;
            height: 200px;
            width: 600px;
            border: 1px solid #E2DEDE;
            resize: none;
            padding: 7px 9px;
            box-sizing: border-box;
        }
        #description_field {
            border-radius: 6px;
            height: 225px;
            width: 600px;
            border: 1px solid #E2DEDE;
            resize: none;
            padding: 7px 9px;
            box-sizing: border-box;

        }
        #choice_field {
           height: 70px;
           width: 175px;
           border: 1px solid #E2DEDE;
           border-radius: 6px;
        }
        #vitamins_quantity {
           height: 30px;
           width: 93px;
           border: 1px solid #E2DEDE;
           border-radius: 6px;
        }
        #deathdoze {
            border-radius: 6px;
            height: 29px;
            width: 175px;
            border: 1px solid #E2DEDE;
        }
        #calories {
            border-radius: 6px;
            height: 29px;
            width: 175px;
            border: 1px solid #E2DEDE;
        }
        input#image_field {
            height: 215px;
            width: 215px;
            text-indent: -9999px;
            color: transparent;
        }
        .translucent-text {
            font-size: 18px;
            font-weight: 400;
            opacity: 0.5;
        }
        th {
            padding: 5px !important;
        }
        td {
            padding: 5px !important;
        }
        thead {
            font-weight: bold;
        }
        button{
            background: #22742b;
        }
        tr:nth-child(2n+1) {
            background-color: #e3e3e3 !important;
        }
        .statistics {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
        }
</style>

    </style>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>

<body class="bg">

{% if request.get_full_path == '/' %}
    <div class="wrapper1">
        {% else %}
    <div class="wrapper">
        {% endif %}
        <header class="header">
             {% include 'navbar.html' %}
        </header>
        <main class="main">
            {% block content %}
            {% endblock %}
        </main>
        <footer class="footer">
            <p class="text-center mb-4 mt-4" >© Дачные кодеры</p>
        </footer>
    </div>


    {% block base_js %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
            crossorigin="anonymous"></script>
    {% endblock %}

    {% block extra_js %}
    {% endblock %}
</body>

</html>